<template>
    <div class="container">
        <div class="form-wrapper">
            <img src="../../assets/logo.png" class="app-logo"/>
            <p class="app-name">{{appName}}</p>
            <div class="form-panel">
                <a-form @submit="onSubmit" :autoFormCreate="(form) => this.form = form">
                    <a-form-item fieldDecoratorId="username"
                                 hasFeedback
                                 :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入账户名', whitespace: true}]}">
                        <a-input size="large" placeholder="账号">
                            <a-icon slot="prefix" type="user"/>
                        </a-input>
                    </a-form-item>

                    <a-form-item fieldDecoratorId="password"
                                 hasFeedback
                                 :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入密码', whitespace: true}]}">
                        <a-input size="large" type="password" placeholder="密码">
                            <a-icon slot="prefix" type="lock"/>
                        </a-input>
                    </a-form-item>
                    <a-form-item fieldDecoratorId="validate"
                                 :fieldDecoratorOptions="{rules: [{ required: true,type:'object', message: '请进行验证', whitespace: true}]}">
                        <geetest-captcha ref="captcha"></geetest-captcha>
                    </a-form-item>
                    <a-form-item>
                        <a-button :loading="loading" size="large" type="primary" block htmlType='submit'>登录</a-button>
                    </a-form-item>
                </a-form>
                <!--<Form ref="loginForm" :model="loginForm" :rules="loginRules">-->
                <!--<FormItem prop="username">-->
                <!--<i-input size="large" type="text" v-model="loginForm.username" placeholder="用户名">-->
                <!--<Icon type="ios-person-outline" slot="prepend" size="20"></Icon>-->
                <!--</i-input>-->
                <!--</FormItem>-->
                <!--<FormItem prop="password">-->
                <!--<i-input size="large" type="password" v-model="loginForm.password" placeholder="密码">-->
                <!--<Icon type="ios-lock-outline" slot="prepend" size="20"></Icon>-->
                <!--</i-input>-->
                <!--</FormItem>-->
                <!--<FormItem prop="validate">-->
                <!--<geetest-captcha ref="captcha" @change="onChangeCaptcha"></geetest-captcha>-->
                <!--</FormItem>-->
                <!--<FormItem>-->
                <!--<Button :loading="loading" size="large" type="primary" long @click="handleSubmit('loginForm')">-->
                <!--登录-->
                <!--</Button>-->
                <!--</FormItem>-->
                <!--</Form>-->
            </div>
        </div>
        <div class="copy-right">
            copyright @ 2018 夼旗科技 kuangqi ST.  design by Holylight.
        </div>
    </div>
</template>

<script>


    import {captcha} from "../../api/login/index";
    import {mapActions} from 'vuex'
    import GeetestCaptcha from "../../components/GeetestCaptcha";

    export default {
        name: "Login",
        components: {GeetestCaptcha},
        data() {
            return {
                form: null,
                loading:false
                // waiting: true,
                // loginForm: {
                //     username: "",
                //     password: "",
                //     validate: null
                // },
                // loading: false,
                // loginRules: {
                //     username: [
                //         {
                //             required: true,
                //             message: '请输入账号',
                //             trigger: "blur"
                //         },
                //     ],
                //     password: [
                //         {
                //             required: true,
                //             message: '请输入密码',
                //             trigger: "blur"
                //         },
                //         {type: 'string', min: 6, message: '密码不能小于6位', trigger: 'blur'}
                //     ],
                //     validate: [
                //         {
                //             type: 'object',
                //             required: true,
                //             message: '请进行验证',
                //             trigger: "blur"
                //         },
                //     ]
                // }
            }
        },
        computed: {
            appName() {
                return process.env.VUE_APP_TITLE
            }
        },

        mounted() {
            // this.setupGeetest()
        },

        methods: {
            ...mapActions('admin/account', [
                'login'
            ]),

            // onChangeCaptcha(value) {
            //     this.loginForm.validate = value;
            // },
            // handleSubmit(name) {
            //     this.$refs[name].validate((valid) => {
            //         if (valid) {
            //             // 登录
            //             // 注意 这里的演示没有传验证码
            //             // 具体需要传递的数据请自行修改代码
            //             this.login({
            //                 vm: this,
            //                 username: this.loginForm.username,
            //                 password: this.loginForm.password,
            //                 validate: this.loginForm.validate
            //             }).then(res => {
            //
            //             }).catch(error => {
            //                 console.error(error)
            //             })
            //
            //         } else {
            //             this.$refs.captcha.resetGeetest();
            //             // this.resetGeetest();
            //             // 登录表单校验失败
            //             // this.$message.error('表单校验失败')
            //         }
            //     })
            // },

            onSubmit(e) {
                e.preventDefault()
                this.form.validateFields((err, values) => {
                    if (!err) {
                        console.log('Received values of form: ', values)
                        this.login({
                            vm: this,
                            username: values.username,
                            password: values.password,
                            validate: values.validate
                        }).then(res => {

                        }).catch(error => {
                            console.error(error)
                        })
                    }else {
                        this.$refs.captcha.resetGeetest();

                    }
                })
            },

            // resetGeetest() {
            //     this.captchaObj.reset();
            //     this.loginForm.validate = null
            // },
            // setupGeetest() {
            //     let self = this
            //     captcha().then(data => {
            //         console.log(data)
            //         window.initGeetest({
            //             // 以下配置参数来自服务端 SDK
            //             gt: data.gt,
            //             challenge: data.challenge,
            //             offline: !data.success,
            //             new_captcha: true,
            //             product: "popup", // 产品形式，包括：float，popup
            //             width: "288px"
            //
            //         }, (captchaObj) => {
            //             // 这里可以调用验证实例 captchaObj 的实例方法
            //             captchaObj.appendTo('#captcha');
            //             self.captchaObj = captchaObj
            //             captchaObj.onReady(() => {
            //                 self.waiting = false
            //             });
            //             captchaObj.onSuccess(() => {
            //                 self.loginForm.validate = captchaObj.getValidate();
            //             })
            //
            //         })
            //     }).catch(error => {
            //
            //     })
            // },
        }
    }
</script>

<style scoped lang="less">


    .container {
        height: 100%;
        .form-wrapper {
            width: 320px;
            min-height: 480px;
            box-sizing: border-box;
            left: 50%;
            position: absolute;
            top: 124px;
            transform: translate(-50%, 0);
            .form-panel {
                background: #fff;
                box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.2);
                margin-top: 32px;
                box-sizing: border-box;
                padding: 16px;
            }
            .app-logo {
                display: block;
                width: 100px;
                height: 100px;
                margin-left: auto;
                margin-right: auto;
            }
            .app-name {
                margin: 0;
                font-size: 18px;
                color: #444;
                text-align: center;
                margin-top: 12px;
            }

        }

        .copy-right {
            position: absolute;
            bottom: 40px;
            font-size: 14px;
            color: #666;
            text-align: center;
            left: 50%;
            transform: translate(-50%, -50%);

        }
    }

</style>
